<template style="background-color: #1e1e1e">
  <div class="app" style="background-color: #1e1e1e">
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="white"
          size="30px" @click="back"/>
      <p style="color: beige;font-size: 16px;width: 100%;margin: 10px auto;">订单详情</p>
    </div>
    <div class="top">
      <van-swipe :autoplay="3000" :height="160" class="swipe-container">
        <van-swipe-item>
          <img style="width: 80%; height: 100%;" :src="cars.imageUrl[0]" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="margin: auto;background-color: #f5f7ff;width: 90%;border-radius: 20px;">
      <div class="rental-info-container">
        <div class="car-info">
          <h3 align="left">{{query.carName}}</h3>
        </div>
        <div class="rental-details">
          <br>
          <div class="item">
            <span class="label">租车人</span>
            <span class="value">{{query.userName}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">付款时间</span>
            <span class="value">{{query.createdAt}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">租赁时间</span>
            <span class="value">{{query.startTime}} ~ {{query.endTime}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">提车地址</span>
            <span class="value">{{query.locationPoint}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">总花费</span>
            <span class="value">¥{{query.totalPrice}}</span>
          </div>
        </div>
        <div class="evaluation-btn-container">
          <button v-if="cars.orderStatus === '已支付'" @click="showEvaluation(cars.orderStatus,cars.orderId)">归还</button>
          <button v-if="cars.orderStatus === '已预定'" @click="showEvaluation(cars.orderStatus,cars.orderId)">去支付</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "RentalDetailsView",
  data() {
    return {
      userId: '',
      order: {
        id: "",
        name: "",
        time: "",
        img: "",
        price: "",
        carId: "" // 新增 carId 用于存储接收的汽车 id
      },
      show: false,
      cars: '',
      query:[]
    }
  },
  created() {
    const user = JSON.parse(localStorage.getItem("currentUser"))
    if (user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    // 从路由参数中接收 carId
    this.order.carId = this.$route.params.carId;
    if (this.order.carId==null){
      this.cars = JSON.parse(localStorage.getItem("cars"));
      this.order.carId=this.cars.carId
    }
    console.log(this.order.carId);
    this.cars = JSON.parse(localStorage.getItem("cars"));
    console.log(this.cars)
    this.userId = user.userId;
    this.findOrderList();
  },
  methods: {
    findOrderList(){
      if (this.cars.orderStatus==='已预定'){
        this.axios.get(`http://localhost:10086/api/user/users/findReservedCar/${this.userId}/${this.order.carId}`).then(res => {
          this.query = res.data.data;
        });
      }else {
        this.axios.get(`http://localhost:10086/api/user/users/findzhifuCar/${this.userId}/${this.order.carId}`).then(res => {
          this.query = res.data.data;
        });
      }

    },
    back() {
      this.$router.go(-1)
    },
    showEvaluation(orderStatus,orderId) {
      console.log("订单id"+orderId)

      if (orderStatus === '已支付') {
        var order = {
          orderId: orderId,
          orderStatus: "已归还",
        };
        this.axios.put(`http://localhost:10086/api/order/orders/updateOrder`, order).then(res => {
          setTimeout(() => {
            this.$toast.success('归还成功');
            this.$router.go(-1)
          }, 666)
        });
      } else {
        this.$router.push({
          path: "/payment",
          query: {
            orderId: orderId,
          },
        })


      }


    },
    tiaozhuan(){

      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.result{
  margin-top: 60px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 200px;
  height: 200px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}
.rental-info-container {
  padding: 20px;
}
.car-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.details {
  display: flex;
  margin-top: 10px;
}
.details span {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}
.details i {
  margin-right: 5px;
}
.rental-details {
  margin-top: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.label {
  font-size: 16px;
  font-weight: normal;
}
.value {
  width: 200px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}
.evaluation-btn-container {
  text-align: center;
  margin-top: 20px;
}
.evaluation-btn-container button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.app{
  background-color: #1e1e1e;
  height: 100%;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 可根据实际情况调整高度 */
  width: 100%;
  background-color: #1e1e1e;
  margin-top: 50px; /* 为按钮留出空间，可根据按钮高度调整 */
}
</style>